<template>
  <div v-if="error" class="error-handler">
    <el-alert
      :title="error"
      type="error"
      :closable="true"
      @close="clearError"
      show-icon
    />
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'ErrorHandler',
  setup() {
    const store = useStore()
    
    const error = computed(() => store.state.error)
    
    const clearError = () => {
      store.commit('SET_ERROR', null)
    }
    
    return {
      error,
      clearError
    }
  }
}
</script>

<style scoped>
.error-handler {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
}
</style> 